import classNames from 'classnames'
import { ReactNode } from 'react'
import { useHistory } from 'react-router'
import Icon from '../Icon'
import styles from './index.module.scss'

type Props = {
  // 标题
  title?: ReactNode
  // 插槽方式标题
  children?: ReactNode
  // 右侧
  right?: ReactNode
  // 点击左边的回调
  onBack?: () => void
  // 用于实现固定导航
  fixed?: boolean
  left?: ReactNode
}

export default function NavBar({ title, right, onBack, children, fixed, left }: Props) {
  const history = useHistory()
  // 点击左边箭头两种情况：
  //   情况1. 如果传入 onBack 就直接调用
  //   情况2：没有传入默认实现返回效果
  const back = () => {
    if (onBack) {
      onBack()
    } else {
      history.go(-1)
    }
  }
  return (
    <div className={styles.root}>
      <div className={classNames('main', fixed ? 'fixed' : '')}>
        {/* 后退按钮 */}
        <div className='left' onClick={back}>
          {left ? left : <Icon type='iconfanhui' />}
        </div>
        {/* 居中标题，插槽优先级更高写前面 */}
        <div className='title'>{children || title}</div>
        {/* 右侧内容 */}
        <div className='right'>{right}</div>
      </div>
    </div>
  )
}
